<!DOCTYPE html>
<html>
  
  <head>
    <meta charset="UTF-8">
    <title>后台管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <!-- <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" /> -->
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="../../css/font.css">
    <link rel="stylesheet" href="../../css/xadmin.css">
    <script type="text/javascript" src="../../js/jquery-3.2.1.js"></script>
    <script type="text/javascript" src="../../lib/layui/layui.js" charset="utf-8"></script>
  </head>
  
  </head>
  
  <body>
    <div class="x-body" id="updatebox" data-id="">
		<form class="layui-form" lay-filter="Textform">
			<div class="layui-form-item">
				<label for="name" class="layui-form-label"> <span
					class="x-red">*</span>房间名称
				</label>
				<div class="layui-input-inline">
					<input type="text" id="roomName" name="roomName"
						required="" lay-verify="required" autocomplete="off"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label for="name" class="layui-form-label"> <span
					class="x-red">*</span>所在楼层
				</label>
				<div class="layui-input-inline">
					<input type="text" id="floor" name="floor"
						required="" lay-verify="required" autocomplete="off"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item" style="width:300px;">
				<label class="layui-form-label">所属小区</label>
				<div class="layui-input-block" id = "view">
					<select id="selectvillage" name="blgVillageId" lay-filter="choosevillage">
					<option value="0" >请选择</option>
					
	  				</select>
				</div>
			</div>
			<div class="layui-form-item" style="width:300px;">
				<label class="layui-form-label">所属大楼</label>
				<div class="layui-input-block" id = "view">
					<select id="selectbuiliding" name="blgBuildingId" lay-filter="choosebuilding">
					<option value="0" >请选择</option>
	
	  				</select>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label"> 业主账号 </label>
				<div class="layui-input-inline">
					<input type="text" id="username" name="username" required=""
						autocomplete="off" class="layui-input">
				</div>
				<button id="check" class="layui-btn layui-btn-normal" lay-filter="checkuser">验证</button>
			</div>
			<div class="layui-form-item" id="userCheck" data-id="" style="height:50px;">
			<label class="layui-form-label" style="height:50px;"> 验证信息 </label>
				<label><span id="Istrue"></span> </label></br>
				<label> <span id="presonName"> </span> </label></br>
				<label> <span id="userId"> </span> </label>
				
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label"><span id="blgUserId" name="blgUserId"> </span></label>
			</div>
			<div class="layui-form-item">
				<label for="L_repass" class="layui-form-label"> </label>
				<button class="layui-btn" lay-filter="add" lay-submit="">
					修改</button>
			</div>
		</form>
	</div>
    <script>
 
        var hasUser=false;

        layui.use(['form','layer'], function(){
          var form = layui.form
          ,layer = layui.layer;
          
          //从url中截取传入的参数
          //这种方法获得的所有参数是一个json的值
          function GetRequest() {
        	   var url = location.search; //获取url中"?"符后的字串
        	   var theRequest = new Object();
        	   if (url.indexOf("?") != -1) {
        	      var str = url.substr(1);
        	      strs = str.split("&");
        	      for(var i = 0; i < strs.length; i ++) {
        	         theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);
        	      }
        	   }
        	   return theRequest;
          }
          //从json中获取对应的参数值
          var id =GetRequest().id;
          //在主块中绑定一个这条信息的ID
          $("#updatebox").attr("data-id",id);
          
          
          //初始化第一级下拉菜单
          $.ajax({
          		type: "post",
            	url: "../../Information/showallvillage",
            	async: false,
            	success:function(result){
            		$.each(result.listvillage,function(index,value){
              		    $("#selectvillage").append("<option value="+value.villageId+">"+value.villageName+"</option>");
              		});
            		form.render('select','choosevillage');
            	},
            	error:function(){
            		layer.msg("小区的信息没有正确地加载到选择菜单中!",{icon:2,time:1500});
            	}
          });
          
          
          //表单初始值查询
          $.ajax({
        	type: "post",
          	url: "../../Information/showRoomByRoomId",
          	async: true,
          	data:{
          		"id":id
          	},
          	success: function(result){
                //表单值初始化将查询到的值放在表单中
                
                
                $.ajax({
                	type: "post",
                  	url: "../../Information/showBuildingByKey",
                  	async: false,
                  	data:{
                  		"id":result.room.blgBuildingId
                  	},
                  	success:function(result){
                  		UpdateBuildingSelect(result.building.blgVillageId);
                  		$("#selectvillage").val(result.building.blgVillageId);
                  	},
                  	error:function(){
                  		layer.msg("数据加载出错!",{icon:2,time:1500});
                  	}
                });
                
                UpdateUserSelect(result.room.blgUserId);
                
                console.log(result.room.blgBuildingId);
                $("#selectbuilding").val(result.room.blgBuildingId);
                form.render('select');
                
                var json={};
                json.floor=result.room.floor;
                json.roomName=result.room.roomName;
                json.blgBuildingId=result.room.blgBuildingId
                form.val("Textform",json); 
                console.log("表单赋初值");
                
                
                
                $("#check").bind("click",function(){
            		
            		console.log("ok");
            		var userName = $("#username").val();
                	
                	$.ajax({
                		type:"post",
                		url:"../../Information/getUserInfoByUserName",
                		async: true,
                		data:{
                			"userName":userName
                		},
                		success:function(result){
                			if(result.user.userId!=null){
                				if(result.user.presonName==null){result.user.presonName=""};
                				$("#presonName").text("用户的姓名："+result.user.presonName);
                				$("#userId").text("用户ID："+result.user.userId);
                				//在div中加入data-id
                				$("#userCheck").attr("data-id",result.user.userId);
                				$("#Istrue").text("该用户可以绑定");
                				$("#Istrue").css('color','#00FF00');
                				hasUser = true;
                			}else{
                				$("#presonName").text("");
                				$("#userId").text("");
                				$("#Istrue").text("没有查找到该用户");
                				$("#Istrue").css('color','#FF0000');
                				hasUser = false;
                			}
                		},
                		error:function(){
                			layer.msg("异常的查询!",{icon:6,time:1500});
                		}
                	});
                	
                	//这也是layui的大坑之一，放在表单中的按钮会自动提交，加上这个就禁用了该按钮的跳转
                	return false;
            	});
          	},
          	error: function(){
          		layer.msg("需要修改的大楼信息没有正确地加载!",{icon:2,time:1500});
          	}
          }); 
          
          
          form.on('select(choosevillage)',function(data){
        	  
        	//选择菜单前先清空原有的值
          	$("#selectbuiliding").find("option").remove();
          	$("#selectbuiliding").append("<option value=0>请选择</option>");
          	
          	//发异步请求查询所有的大楼值放进下拉菜单中
          	if(data.value!=0){
    			  $.ajax({
    	        		type: "post",
    	              	url: "../../Information/showbuilding",
    	              	async: true,
    	              	data:{
    	            		"VID":data.value
    	            	},
    	              	success:function(result){
    	              		$.each(result.listbuilding,function(index,value){
    	              			//下列2种方法其中一种都可以
    	              		    $("#selectbuiliding").append("<option value="+value.buildingId+">"+value.buildingName+"</option>");
    	              		    form.render();
    	              		});
    	              	},
    	              	error:function(){
    	              		layer.msg("大楼的信息没有正确地加载到选择菜单中!",{icon:6,time:1500});
    	              	}
    			  });
          	}
          	//这绝对是layui的第一大坑
          	form.render('select');
        	  
        	  
          });
          
          

          //监听提交
          form.on('submit(add)', function(data){
        	 
        	  var tips = "你还没有为房间绑定用户，是否继续提交修改？"
        	        if(hasUser!=false){tips = "用户已绑定，继续提交修改？"}
        	        
        	        layer.confirm(tips,function(){
        	        	
        	          var id = document.getElementById("updatebox").getAttribute("data-id");
        	          var json={};
        	          json.roomId = id;
        	          json.roomName=$("#roomName").val();
        	          json.floor=$("#floor").val();
        	          json.blgBuildingId=$("#selectbuiliding").val();
        	          if(hasUser!=false){
        	        	  json.blgUserId=$("#userCheck").attr("data-id");
        	          }else{
        	        	  json.blgUserId=null;
        	          }
        	          
        	          
        	          $.ajax({
        	          	type: "post",
        	          	url: "../../Information/updateroom",
        	          	async: true,
        	          	data:json,
        	          	dataType:'json',
        	          	success: function(result) {
        	          		if(result.msg == 'success') {
        	            			layer.msg("修改成功",{icon:6,time:1500},function(){
        	            				var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
        	            				parent.layer.close(index); //再执行关闭   
        	            				parent.location.reload();
        	                		});
        	          		} else {
        	          			layer.msg("修改失败",{icon:5,time:1500},function(){
        	              			
        	            			});
        	          		} 
        	          	},   	
        	          	error: function() {
        	                  layer.alert("数据异常", {icon: 2,time:1500});
        	              }
        	          });
        	        });
        	          return false;
        	        });
          
          
          
          //刷新选择大楼的下拉菜单
          function UpdateBuildingSelect(id){
           	
       	   console.log(id);
           	
           	//选择菜单前先清空原有的值
            $("#selectbuiliding").find("option").remove();
           	$("#selectbuiliding").append("<option value=0>请选择</option>");
           	
           	console.log("debug");
           	
           	//发异步请求查询所有的大楼值放进下拉菜单中
           	if(id!=0){
     			  $.ajax({
     	        		type: "post",
     	              	url: "../../Information/showbuilding",
     	              	async: false,
     	              	data:{
     	            		"VID":id
     	            	},
     	              	success:function(result){
     	              		console.log(result.listbuilding);
     	              		$.each(result.listbuilding,function(index,value){
     	              			//下列2种方法其中一种都可以
     	              		    $("#selectbuiliding").append("<option value="+value.buildingId+">"+value.buildingName+"</option>");
     	              		 console.log("二级菜单");
     	              		});
     	              		form.render();
     	              	},
     	              	error:function(){
     	              		layer.msg("大楼的信息没有正确地加载到选择菜单中!",{icon:6,time:1500});
     	              	}
     			  });
           	}
          //这绝对是layui的第一大坑
        	form.render('select');
        	
           }
           
           
           //刷新绑定用户的验证
           function UpdateUserSelect(id){
           	
           	if(id!=null){
           		$.ajax({
           			type: "post",
     	              	url: "../../Information/getUserInfoByUserID",
     	              	async: true,
     	              	data:{
     	            		"id":id
     	            	},
     	            	success:function(result){
     	            		if(result.user.userId!=null){
               				if(result.user.presonName==null){result.user.presonName=""};
               				$("#presonName").text("用户的姓名："+result.user.presonName);
               				$("#userId").text("用户ID："+result.user.userId);
               				//在div中加入data-id
               				$("#userCheck").attr("data-id",result.user.userId);
               				$("#Istrue").text("该用户可以绑定");
               				$("#Istrue").css('color','#00FF00');
               				$("#username").val(result.user.userName);
               				hasUser = true;
               			}else{
               				$("#presonName").text("");
               				$("#userId").text("");
               				$("#Istrue").text("没有查找到该用户");
               				$("#Istrue").css('color','#FF0000');
               				hasUser = false;
               			}
     	            	},
     	            	error:function(){
     	            		
     	            	}
           		});
           	}
           }
          
          
        });
        
        
        
       
            
          
   </script>

  </body>

</html>